<template>
  <div id="loading">
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
  </div>
</template>

<script>
    export default {
        name: "Loading"
    }
</script>

<style scoped>
  #loading{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
  }
  .symbol{
    width:10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000000;
    position: absolute;
    animation: de 800ms ease infinite;
  }
  @keyframes de {
    0%,100%{
      transform: scale(1);
    }
    30%{
      transform: scale(1.5);
    }
  }
  .symbol:nth-child(1){
    left: 50%;
    top: 10px;
    animation-delay: 0ms;
  }
  .symbol:nth-child(2){
    top: 25%;
    left:75%;
    animation-delay: 100ms;
  }
  .symbol:nth-child(3){
    top: 50%;
    right: 0;
    animation-delay: 200ms;

  }
  .symbol:nth-child(4){
    top:75%;
    left:75%;
    animation-delay: 300ms;
  }
  .symbol:nth-child(5){
    bottom: 0;
    left: 50%;
    animation-delay: 400ms;
  }
  .symbol:nth-child(6){
    top:75%;
    left: 25%;
    animation-delay: 500ms;
  }
  .symbol:nth-child(7){
    left: 10px;
    top: 50%;
    animation-delay: 600ms;
  }
  .symbol:nth-child(8){
    top: 25%;
    left: 25%;
    animation-delay: 700ms;
  }
</style>
